<template>
  <div class="comicCatalogSubject">
    <div class="comicCatalogHeader">
      <van-icon name="arrow-left" @click="returnPage" />
      <font>{{ comicName }}</font>
    </div>
    <div class="comicCatalogMain">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) in catalogList"
          :key="index"
          @click="toComicInfo(item)"
          >第{{ item }}章</van-cell
        >
      </van-list>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      comicName: '',
      loading: false,
      finished: false,
      catalogList: ''
    };
  },
  created () {
    var name = this.$route.query.comicName;
    this.comicName = name;
    var array = [];
    for (var i = 0; i <= 20; i++) {
      array.push(i + 1);
    }
    this.catalogList = array;
  },
  methods: {
    returnPage () {
      this.$router.go(-1);
    },
    onLoad () {
      var size = this.catalogList.length;
      for (var i = size; i < size + 10; i++) {
        this.catalogList.push(i + 1);
      }
      // 加载状态结束
      this.loading = false;
      if (this.catalogList.length >= 150) {
        this.finished = true;
      }
    },
    toComicInfo (value) {
      var id = this.$route.query.id;
      var name = this.$route.query.comicName;

      this.$router.push({
        path: '/comicBrowse',
        query: {
          id: id,
          chapter: value,
          title: name
        }

      });
    }
  }
};
</script>

<style lang="less" scoped>
.comicCatalogSubject {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #a7a7a7;
}
.comicCatalogSubject .comicCatalogHeader {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  i {
    font-size: 30px;
  }
  font {
    font-size: 20px;
    font-weight: bold;
  }
}
.comicCatalogSubject .comicCatalogMain {
  flex: 1;
  width: 100%;
  background-color: olive;
  margin-top: 5px;
  overflow: auto;
}
</style>>
